<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: #cccccc;
            display: none;
        }
        button {
            border: none;
            padding: 5px 20px;
            outline: none;
            cursor: pointer;
        }
        .active{
            background: red;
        }
    </style>
</head>
<body>
<button class="active">A</button>
<button>B</button>
<button>C</button>
<br/><br/>
<div id="div1" style="display: block">AAA</div>
<div id="div2">BBB</div>
<div id="div3">CCC</div>

<script>

    window.onload = function () {
        new TabSwitch('div1');
    };

  function TabSwitch(id) {
      this.aBtn = document.getElementsByTagName('button');
      this.aDiv = document.getElementsByTagName('div');


  for(var i=0;i<this.aBtn.length;i++){

      var _this = this;
      this.aBtn[i].index = i;
      this.aBtn[i].onclick =function () {
          _this.fnClick(this);
      }
    }
  };

  TabSwitch.prototype.fnClick = function(oBtn) {

      for(var i=0;i<this.aBtn.length;i++){
          this.aBtn[i].className = '';
          this.aDiv[i].style.display ='none';
      }
      oBtn.className = 'active';
      this.aDiv[oBtn.index].style.display ='block';
  }



</script>
</body>
</html>